<template>
	<view class="">
		<view class="img pr">
			<video id='myVideo' class="w100 h100" :src="src" :controls='false' :show-center-play-btn='false'
				vslide-gesture @ended='ended' @timeupdate='timeupdate'>
			</video>
			<view class="video_bf" @click="playPause">
				<image v-if="play_pause" class="bf" src="@/static/my/bf.png" mode="" />
			</view>
			<view class="pa line z99">
				<u-line-progress :percentage="percentage" :showText="false" height="3" inactiveColor='#323232'
					activeColor="#575757"></u-line-progress>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			src: {
				default: () => ''
			},
		},
		components: {},
		data() {
			return {
				play_pause: true, //是否显示播放暂停按钮
				percentage: 0, //播放进度
			}
		},
		onLoad() {

		},
		onShow() {

		},
		methods: {
			playPause() { //播放暂停事件
				const videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
				if (this.play_pause) {
					console.log('播放',videoContext);
					videoContext.play(); //播放
				} else {
					console.log('暂停');
					videoContext.pause(); //暂停
				}
				this.play_pause = !this.play_pause
			},
			timeupdate(e) { //播放进度时触发
				// console.log(e.detail);
				this.percentage = (e.detail.currentTime / e.detail.duration * 100).toFixed(0)
				// console.log(this.percentage);
			},
			ended() { //视频播放完
				this.play_pause = true
			},
		},
		computed: {

		},
		watch: {

		}
	}
</script>

<style lang="scss" scoped>
	.img {
		width: 100%;
		height: 472upx;
	}

	.video_bf {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);

		.bf {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 76upx;
			height: 76upx;
		}
	}

	.line {
		bottom: 0;
		left: 0;
		width: 100%;
	}
</style>